<template lang="pug">
  a-layout(id="components-layout-demo-fixed-sider" style="min-height: 100vh" hasSider)
    a-layout-sider(v-model="collapsed" :collapsible="collapsible" @collapse="onCollapse" theme="dark" :style="{ overflow: 'auto', height: '100vh', position: 'fixed'}")
          .logo
            a-row(type="flex")
             a-col(:flex="8")
               img(:src="require('../../assets/images/LOGO.png')" alt="图片无法显示")
             a-col(:flex="2" class="word")
               span(ref="myWord") 阿尔法易购平台

          a-menu(theme="dark" v-model="selectedKeys" :open-keys="openKeys" mode="inline" @select="selectMenu" @openChange="onOpenChange")
            template(v-for="item in routes")
              a-menu-item(v-if="item.meta.show" :key="item.path")
               router-link(:to="item.path")
                a-icon(:type="item.meta.icon")
                span {{item.name}}
              a-sub-menu(:key="item.name" v-if="item.children")
                span(slot="title")
                   a-icon(:type="item.meta.icon")
                   span {{ item.name }}
                //router-link(v-for="child in item.children" :to="child.path" tag="div") :default-selected-keys="[2]"   div(style="position: fixed")
                template(v-for="child in item.children")
                    a-menu-item(:key="child.path" v-if="child.meta.show")
                      router-link(:to="child.path")
                        a-icon(:type="child.meta.icon")
                        span {{ child.name }}


    a-layout(style="margin-left: 200px" ref="changeLeft")
      a-layout-header(style="background: #fff; padding: 0")
        div
          a-row
            a-col(:span="15")
              .card-container
                  a-tabs(v-model="activeKey" type="editable-card" @edit="onEdit" :hideAdd="hideAdd" size="small" @change="selectTab")
                    a-tab-pane(v-for="item in routeTabs" v-if="!item.closable" :key="item.path" :tab="item.name" :closable="item.closable")
            a-col(:span="4")
            a-col(:span="5")
              div
                a-row
                  a-col(:span="12")
                  a-col(:span="12")
                    .user
                      .userImage
                        a-avatar(:size="55" icon="user" :src="require('../../assets/images/user.gif')")
                      userAccount

      a-layout-content( style="margin: 0 16px")
        a-breadcrumb(style="margin: 16px 0;")
          a-breadcrumb-item(v-for="crumbN in crumbs" :key="crumbN.name")
             a-button(type="link" disabled) {{ crumbN.name }}

        div(:style="{ padding: '24px', background: '#fff', minHeight: '600px' }")
          router-view(v-if="showRoutes")

      a-layout-footer(style="text-align: center") AlphaShow Design ©2020 Created by AlphaCloud
      a-back-top

</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator';
//import LOGO from '@/assets/images/LOGO.png';
//import User from '@/assets/images/user.gif';
import {routes} from '@/router';
import routeControl from '@/components/RouteControl.vue';
import userAccount from '@/components/userAccount.vue';
import {VueRouter} from "vue-router/types/router";

@Component({
  components: {
    routeControl,
    userAccount,
}
})

// eslint-disable-next-line
/* eslint-disable */
export default class House extends Vue {
  //public src = LOGO;
  //public iconUser = User;
  public collapsed = false;
  public collapsible = true;
  public hideAdd = true;
  public selectedKeys = ['/welcome'];
  public routeTabs: Array<any> = [];
  public activeKey = '/welcome';
  public closable = false;
  public showRoutes = true;
  public openKeys = ['顾客管理'];
  public rootSubmenuKeys = ['首页','顾客管理','产品管理'];
  public myWord: HTMLElement | null = null;
  public changeLeft: HTMLElement | null = null;
  public newTabIndex: string | null = '';
  public $refs: {
    myWord: HTMLElement
    changeLeft: any
  }
  routes = routes;
  // public router: any= this.$router.options.routes;

  @Watch('$route') routeChange(to: VueRouter, from: VueRouter) {
    // console.log(to,from);
    this.add();
  }

  //设置只打开一个多级菜单栏
  public onOpenChange(openKeys: any) {
    const latestOpenKey = openKeys.find((key: any) => this.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.openKeys = openKeys;
    } else{
      this.openKeys = latestOpenKey ? [latestOpenKey] : [];
    }
  }

  public mounted(): void {
    this.myWord = this.$refs.myWord;
    this.changeLeft = this.$refs.changeLeft.$el;
  }

  //内容区随着导航栏展开或折叠而适应
  onCollapse(collapsed, type) {
    // console.log(collapsed, type, '123');
    if (this.changeLeft.style.marginLeft === '200px') {
      this.changeLeft.style.marginLeft = '80px';
    } else {
      this.changeLeft.style.marginLeft = '200px';
    }
  }

  //LOGO中字体的展示和隐藏
  @Watch('collapsed')
  public displayWord() {
    const e = this.myWord;
    if (e.style.display === 'none') {
      e.style.display = 'block';
    } else {
      e.style.display = 'none';
    }
  }

  //选中菜单栏事件
  public selectMenu() {
    console.log('...');
  }

  //选中的tab标签
  public selectTab (activeKey: string) {
    // const num = activeKey.toString();
    // const actives = parseInt(num.replace(/[^0-9]/ig,""));
    // this.$router.push({path:this.routeTabs[actives - 2].path});
    this.$router.push({path: activeKey});
    (this.selectedKeys as any) = [this.$route.path];
  }

  //新增和删除tab的回调
  public onEdit(targetKey: string,action: any): void{
    this[action](targetKey);
  }

  public add() {

    // const tabObj = this.tabObj;
    // const tabObj = {};
    // if (!tabObj[path]) {
    //   tabObj[path] = this.$route;
    // } else {
    //   this.activeKey = this.$route;
    //   return ;
    // }
    const path = this.$route.path;
    const routeTabs = this.routeTabs;
    const name = this.$route.name;
    if (routeTabs.find(item => item.name === name)) {
      (this.activeKey as any) = path;
      return;
    }
    routeTabs.push({name, key: path, path});
    this.routeTabs = routeTabs;
    (this.activeKey as any) = path;
  }

  public remove(targetKey: string) {
    // key => path

    // if (this.tabObj[key]) {
    //   if (key === this.$route.path) {
    //     this.$router.push({name: 'home'});
    //   }
    //   delete this.tabObj[key];
    // }
    //console.log(targetKey,this.activeKey,'移除');
    let activeKey: string = this.activeKey;
    let lastIndex;
    this.routeTabs.forEach((routeTabs, i) => {
      if (routeTabs.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const routeTabs = this.routeTabs.filter(routeTabs => routeTabs.key !== targetKey);
    if ( routeTabs.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = targetKey[lastIndex];
      } else {
        activeKey = routeTabs[0].key;
      }
    }
    this.routeTabs = routeTabs;
    this.activeKey = activeKey;
  }

  //遍历路由
  public newArr() {
    for(let i = 2; i < this.routes.length; i++){
      this.routeTabs.push({name: this.routes[i].name,key: this.routes[i].path, closable: this.routes[i].meta.close,path:this.routes[i].path})
    }
  }

  //面包屑
  get crumbs() {
    return this.$route.matched;
  }

  public created() {
    this.newArr();
  }
}
</script>

<style lang="stylus">

#components-layout-demo-fixed-sider .logo {
  height 32px;
  //background: rgba(255, 255, 255, 0.2);
  margin 18px;
  text-align center
}

.word {
  color white;
  font-size 15px
  font-family FangSong;
}
.userImage{
  display right
}
.user {
  text-align center
  & .userImage{
    display inline-block
    width 55px
    position absolute
    top -1px
  }
}
.card-container {
  overflow: hidden;
  padding: 24px;
}

</style>
